<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2024-12-10 09:18:46
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2024-12-15 17:13:48
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\views\login\components\pbeckbox.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="eckbox">
    <span @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="spanecked">
      <img src="@/assets/images/notselected.png" alt="" v-show="!checked && !Mouseflage" @click="setClick(true)">
      <img src="@/assets/images/selected.png" alt="" v-show="checked" @click="setClick(false)">
      <img src="@/assets/images/hoverselected.png" alt="" v-show="!checked && Mouseflage" @click="setClick(true)">
    </span>
    <span>
      记住密码
    </span>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['eckboxclick'])
const props = defineProps({
  checked: {
    default: false,
    type: Boolean
  }
})

const Mouseflage = ref(false)

const setClick = (Bol: boolean) => {
  emit('eckboxclick', Bol)
}
const handleMouseEnter = () => {
  Mouseflage.value = true
}
const handleMouseLeave = () => {
  Mouseflage.value = false
}
watch(() => props.checked, (newVal, oldVal) => {
  console.log(`childValue changed from ${oldVal} to ${newVal}`);
  // 你可以在这里执行任何响应变化的逻辑
});
</script>

<style lang="scss" scoped>
.eckbox {
  display: flex;
  align-items: center;

  .spanecked {
    display: flex;
    align-items: center;

    >img {
      width: 20px;
      height: 20px;
    }
  }

  .spanecked {
    cursor: pointer;
  }

  >span {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  >span:nth-child(2) {
    margin-left: 8px;
  }
}
</style>
